<template>
  <div id="app">
    <!-- <router-link to="/home" tag="button">用户</router-link> -->
    <router-link to="/about" tag="button">关于</router-link>

    <router-link :to="'/home/'+user1" tag="button">肖雅涵</router-link>
    <router-link :to="'/home/'+user2" tag="button">赵梦媛</router-link>
    <router-view active-class="myactive"></router-view>

    <button @click="toHome">首页</button>
    <button @click="toUser">用户</button>

  </div>
</template>

<script>
export default {
    name: 'App',
    components: {
      
    },
    data(){
        return {
          user1:'肖雅涵',
          user2:'赵梦媛'
        }
    },
    methods: {
      toHome(){
          //在函数中,通过组件实例对象下的$route,获取路由对象,然后push到要跳转的路由
          // this.$router.push('/home')//字符串的方式进行跳转
          this.$router.push({path:'/home'})//以对象的方式进行跳转
          // this.$router.replace('/home')
      },
      toUser(){
          this.$router.push('/user/'+this.user1)  
      }
    }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
button{
  margin:10px;
}
.myactive{
    color:red;
}
</style>
